<template>
  <div>
    <h2>学生用户信息</h2>
    <table class="custom-table">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in userInfo"
          :key="index"
          @click="clickUser(index)"
        >
          <td>{{ item.num }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <UserInfo v-if="selectedUser" :info="selectedUser" />
  </div>
</template>

<script>
import UserInfo from "@/components/UserInfo.vue";

export default {
  components: { UserInfo },
  name: "AboutView",

  data() {
    return {
      userInfo: [
        {
          num: "1",
          name: "cds",
          age: "12",
        },
        {
          num: "3",
          name: "lizi",
          age: "12",
        },
        {
          num: "2",
          name: "hanmeimei",
          age: "13",
        },
      ],
      selectedUser: null, // 新增一个数据属性来保存选中的用户信息
    };
  },

  methods: {
    // 修改为一个方法处理点击事件
    clickUser(index) {
      // 当点击表格行时，设置 selectedUser 为对应的用户信息
      this.selectedUser = this.userInfo[index];
    },
  },
};
</script>

<style scoped>
.custom-table {
  width: 100%;
  border-collapse: collapse; /* 合并相邻单元格的边框 */
}

.custom-table th,
.custom-table td {
  padding: 12px 16px; /* 增加单元格内边距 */
  text-align: left; /* 文本左对齐 */
  border: 1px solid #ddd; /* 添加边框 */
}

.custom-table th {
  background-color: #f2f2f2; /* 表头背景色 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色 */
}

.custom-table tr:hover {
  background-color: #f5f5f5; /* 鼠标悬停时的行背景色 */
}

/* 可选：点击高亮行 */
.custom-table .selected-row {
  background-color: #eaf2ff !important; /* 点击后的行背景色 */
}
</style>